<script setup lang="ts">
import { ref, reactive } from 'vue'
//暂无数据组件
import NoData from '@/components/NoData/NoData.vue'
// 数据列表组件
import MyList from '@/pages/my/components/MyList.vue'
// 获取谁看过我我看过谁的数据
import { getMyLook } from '@/services/my/myLook/myLook'

import { onLoad, onShow } from '@dcloudio/uni-app'

// 获取当前用户的ID
const userID = uni.getStorageSync('userInfo').id
//切换状态的数据
let current = ref(0)

// 顶部navs数据
let navCurrent = ref([
  { id: 1, title: '谁看过我' },
  { id: 2, title: '我看过谁' },
])

// 切换展示数据
const changeCurrent = (index: number) => {
  current.value = index
  uni.setNavigationBarTitle({ title: navCurrent.value[index].title })
}

// 谁看过我的数据
let lookMe = reactive([])
// 我看过谁的数据
// F:女 M:男
let seen = reactive([])

// 1: 谁看过我  0:我看过谁
const getData = async () => {
  const lookRes: any = await getMyLook(userID, '1') //谁看过我
  const seenRes: any = await getMyLook(userID, '0') // 我看过谁
  lookMe = lookRes?.data?.result?.reverse()
  seen = seenRes?.data?.result?.reverse()
}
onLoad(() => {
  getData()
})
</script>

<template>
  <view class="navSection">
    <view class="navTitle">
      <view
        v-for="(item, index) in navCurrent"
        :key="item.id"
        :class="current === index ? 'title size' : 'title'"
        @click="changeCurrent(index)"
      >
        {{ item.title }}
        <div class="navLine" v-show="current === index"></div>
      </view>
    </view>

    <view v-show="current === 0" class="content">
      <template v-if="lookMe.length > 0">
        <view class="lookMe" v-if="false">
          <view class="lookMeIcon">
            <image src="@/static/My/avatar.png" mode="scaleToFill" class="lookMeImg" />
            <image src="@/static/My/avatar.png" mode="scaleToFill" class="lookMeImg" />
            <image src="@/static/My/avatar.png" mode="scaleToFill" class="lookMeImg" />
          </view>
          <view class="lookMeText">最近有{{ lookMe.length }}人看过你</view>
          <view style="text-align: center">缘分就在一瞬间，不错过喜欢你的人</view>
          <button class="btn">
            <uni-icons type="vip" size="16" color="white"></uni-icons>
            立即开头VIP查看
          </button>
        </view>
        <MyList :data="lookMe" v-if="true" />
      </template>
      <NoData v-else />
    </view>

    <view v-show="current === 1" class="content">
      <template v-if="seen.length > 0">
        <MyList :data="seen" />
      </template>
      <NoData v-else />
    </view>
  </view>
</template>

<style scoped lang="scss">
@keyframes bar {
  0% {
    width: 0%;
  }

  100% {
    width: 20%;
  }
}

.navSection {
  width: 100%;
  padding: 1%;
  box-sizing: border-box;

  .navTitle {
    height: 6vh;

    .title {
      padding: 5px;
      font-size: 32rpx;
      display: inline-block;
      box-sizing: border-box;

      .navLine {
        width: 20%;
        height: 5px;
        border-radius: 10px;
        margin: 0 auto;
        background-color: #ea6389;
        animation: bar 0.8s both;
      }
    }

    .size {
      font-weight: 700;
      font-size: 50rpx;
      transition: all 0.3s;
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 100px);
    padding: 10px;
    box-sizing: border-box;

    .lookMe {
      width: 100%;
      height: 35%;
      padding: 20px;
      border-radius: 10px;
      box-sizing: border-box;
      background-color: #f5f0f0;

      .lookMeIcon {
        width: 50%;
        height: 35%;
        margin: 0 auto;
        padding-left: 14vw;
        padding-top: 1vh;

        .lookMeImg {
          width: 10vw;
          height: 5vh;
          margin-left: -5vw;
          border-radius: 50%;
          border: 2px solid #fff;
        }
      }

      .lookMeText {
        padding: 10px;
        color: gray;
        text-align: center;
        box-sizing: border-box;
      }

      .btn {
        width: 70%;
        height: 40px;
        color: #fff;
        margin: 10px auto;
        font-size: 16px;
        border-radius: 20px;
        background: linear-gradient(to right, #6bc2ce, #58becd, #2faec1);
      }
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 100px);
    padding: 10px;
    box-sizing: border-box;

    .lookMe {
      width: 100%;
      height: 35%;
      padding: 20px;
      border-radius: 10px;
      box-sizing: border-box;
      background-color: #f5f0f0;

      .lookMeIcon {
        width: 55%;
        height: 30%;
        margin: 0 auto;

        .lookMeImg {
          width: 30%;
          height: 80%;
          border-radius: 50%;
          border: 2px solid #fff;
        }
      }

      .lookMeText {
        padding: 10px;
        color: gray;
        text-align: center;
        box-sizing: border-box;
      }

      .btn {
        width: 70%;
        height: 40px;
        color: #fff;
        margin: 10px auto;
        font-size: 16px;
        border-radius: 20px;
        background: linear-gradient(to right, #6bc2ce, #58becd, #2faec1);
      }
    }
  }
}
</style>
